<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>recorder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="recorder.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<audio controls></audio>
<button style="display: block;">录音</button>
<script>

    var rec = Recorder();

    $('button').on('click', function () {
        var txt = $(this).html();
        if (txt === '录音') {
            rec.open(function () {//打开麦克风授权获得相关资源
                rec.start();//开始录音
            }, function (msg) {
                alert("无法录音:" + msg);
            });
            $(this).html('停止');
        } else {
            rec.stop(function (blob) {
                rec.close();//释放录音资源

                //兼容webkit内核浏览器
                var CompatibleURL = window.URL || window.webkitURL;
                //将视频流设置为video元素的源
                $('audio').attr('src', CompatibleURL.createObjectURL(blob));

                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = function () {
                    var res = reader.result;
                    var base64data = res.split('data:audio/mp3;base64,')[1];
                    alert("获取base64文件编码成功");
                }

            }, function (msg) {
                alert("录音失败:" + msg);
            });
            $(this).html('录音');
        }
    });



</script>
</body>
</html>